<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>
    <style>
        .title {
            text-align: center;
        }
    </style>
</head>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
    <div class="title">
        <h1>Welcome anonymity Email</h1>
    </div>
    <div style="float: right">
        current email:<span id="currentAddress"></span>
        <button id="change">
            change email
        </button>
    </div>
    <div>
        <table id="emailBody" border="1">
            <tr>
                <td>subject</td>
                <td>from</td>
                <td>to</td>
                <td>content</td>
                <td>time</td>
            </tr>
        </table>
    </div>
</div>

</body>
<script type="text/javascript">
    let to = '';

    function getNewAddress() {
        $.ajax({
            url: 'http://localhost:8080/recipient/getNewRecipient',
            data: {
                'address': to
            },
            dataType: "JSON",
            async: false,
            contentType: 'application/json',
            method: 'GET',
            success: function (res) {
                if (200 !== res.code) {
                    alert("change error!")
                    return;
                }
                let data = res.data;
                $("#currentAddress").text(data)
                to = data
            }, error: function (res) {
                alert("change error!")
            }
        })
        return to;
    }

    let websocket = null;


    if ('WebSocket' in window) {
        let address = getNewAddress();
        console.log("address:" + address)
        websocket = new WebSocket("ws://localhost:8080/join/" + address);
        // websocket = new WebSocket("ws://localhost:8080/join/sydck7n6s <sydck7n6s@localhost>");
    } else {
        alert('Not support websocket')
    }
    //onerror call
    websocket.onerror = function () {
        // setMessageInnerHTML("error");
    };
    //onopen call
    websocket.onopen = function (event) {
        // getNewAddress();
    }

    //onmessage call
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //connection close call
    websocket.onclose = function () {
        // setMessageInnerHTML("close");
        onCloseDelAddress();
    }


    function onCloseDelAddress() {
        navigator.sendBeacon('http://localhost:8080/recipient/update', to);
    }

    $('#change').click(function () {
        getNewAddress();
    })


    //show body to html
    function setMessageInnerHTML(data) {
        if (data === '{}') {
            return;
        }
        let parseJSON = $.parseJSON(data);
        console.log(parseJSON)
        to = parseJSON.to;
        $("#change").val(to)
        $("#currentAddress").text(to)
        $("#emailBody").append(
            '<tr>' +
            '                <td>' + parseJSON.subject + '</td>' +
            '                <td>' + parseJSON.from + '</td>' +
            '                <td>' + parseJSON.to + '</td>' +
            '                <td>' + parseJSON.content + '</td>' +
            '                <td>' + parseJSON.time + '</td>' +
            '            </tr>'
        )
    }

    $(function () {
        window.onbeforeunload = function () {
            onCloseDelAddress();
            websocket.close();
        }
    })


</script>
</html>
